<template>
  <div>
    <el-form :model="form" label-width="130px" :rules="rules" ref="form" class="pad-t-1">
      <el-form-item label="基本信息" class="one-label">
        <!--<el-form-item label="上下架状态：" label-width="170px">-->
        <!--下架-->
        <!--</el-form-item>-->
        <el-form-item label="商品名称：" label-width="170px">
          {{form.title}}
        </el-form-item>

        <el-form-item label="商品货号：" label-width="170px">
          {{form.goodsArticleNo}}
        </el-form-item>

        <el-form-item label="商品图片：" label-width="170px">
          <div class="flex v-align-c" v-for="item in form.goodsImages">
            <img class="picture mar-r-23 width-16 height-136" :src="item.imageUrl" />
          </div>
        </el-form-item>

        <el-form-item label="商品分类：" label-width="170px" prop="goodscategoryIds">
          {{ form.categoryName }}
        </el-form-item>

        <el-form-item label="跨境类型：" label-width="170px" prop="crossBorderType">
          {{ dict.crossBorderType[form.crossBorderType] }}
        </el-form-item>

        <el-form-item label="海关商品编码：" label-width="170px" prop="customsGoodsCode" v-if="form.crossBorderType === '2'">
          {{ form.customsGoodsCode }}
        </el-form-item>

      </el-form-item>
    </el-form>
  </div>
</template>


<script>
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
  import {
    listGoodsCategory
  } from '@/api/goods/goods'
  import {
    getDictCommon
  } from '@/api/common/common.js'
  import {
    getToken
  } from '@/utils/auth'

  export default {
    directives: {
      elDragDialog
    },
    props: ['dict'],
    data() {
      return {
        curIndex: -1,
        curHover: -1,
        token: '',
        form: {
          sortNo: 0,
          title: '', // 标题
          unit: '', // 单位
          goodsType: '30', // 商品类型 30: 实物商品, 2: 批发商品
          goodsImages: [],
          labelTypes: [], // 1: 推荐, 2: 热门,3: 新品4: 包邮
          shareImageUrl: '',
          goodscategoryIds: [], // // 商品分类
          categoryName: '',
          crossBorderType: '1',
          customsGoodsCode: ''
        },
        comDict: {},
        enterpriseId: this.getEnterpriseId(),
        fileLoading: false,
        shareFileLoading: false,
        // 商品的所有分类json
        categoryData: [],
        checked: {},
        dialogCategoryTreeVisible: false,
        rules: {}
      }
    },
    // 初始化页面
    created() {
      this.token = {
        accessToken: getToken()
      }
      this.listGoodsCategory()
      this.initGoodsEdit()
      this.initDictCommon()
    },
    methods: {
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          that.form.sortNo = that.$utils.isExist(data.sortNo) ? data.sortNo : '0'
          that.form.goodsArticleNo = that.$utils.isExist(data.goodsArticleNo) ? data.goodsArticleNo : ''
          that.form.title = that.$utils.isExist(data.title) ? data.title : ''
          that.form.unit = that.$utils.isExist(data.unit) ? data.unit : ''
          that.form.goodsType = that.$utils.isExist(data.goodsType) ? data.goodsType + '' : '1'
          that.form.shareImageUrl = that.$utils.isExist(data.shareImageUrl) ? data.shareImageUrl + '' : ''
          that.form.goodsImages = that.$utils.isExist(data.goodsImages) ? data.goodsImages : ''
          that.form.labelTypes = that.$utils.isExist(data.labelTypes) ? data.labelTypes : []
          that.form.categoryName = that.$utils.isExist(data.categoryName) ? data.categoryName : ''
          that.form.crossBorderType = that.$utils.isExist(data.crossBorderType) ? data.crossBorderType.toString() : '1'
          const oneCategoryId = that.$utils.isExist(data.oneCategoryId) ? data.oneCategoryId : ''
          const twoCategoryId = that.$utils.isExist(data.twoCategoryId) ? data.twoCategoryId : ''
          const threeCategoryId = that.$utils.isExist(data.threeCategoryId) ? data.threeCategoryId : ''
          var arr = [] // 创建一个空数组
          if (that.$utils.isExist(oneCategoryId) && that.$utils.isExist(twoCategoryId) && that.$utils.isExist(
            threeCategoryId)) {
            arr.push(oneCategoryId)
            arr.push(twoCategoryId)
            arr.push(threeCategoryId)
            that.form.goodscategoryIds = arr
          }
        })
      },
      initDictCommon() {
        getDictCommon().then(response => {
          this.comDict = response.data
        })
      },
      // 展示3级任务类型
      showSubCategory(key) {
        this.picData[key].show = true
        const changeData = this.picData[key].show
        this.$delete(this.picData[key], 'show')
        this.$set(this.picData[key], 'show', changeData)
      },
      // 隐藏3级任务类型
      hideSubCategory(key) {
        this.picData[key].show = false
      },
      goodsMouseEnter(key) {
        this.form.goodsImages[key].show = true
        const changeData = this.form.goodsImages[key].show
        this.$delete(this.form.goodsImages[key], 'show')
        this.$set(this.form.goodsImages[key], 'show', changeData)
      },
      goodsMouseLeave(key) {
        this.form.goodsImages[key].show = false
      },
      // 获取类目
      listGoodsCategory() {
        const enterpriseId = this.enterpriseId
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .noraml-hide {
    display: none !important;
  }

  .active {
    display: block !important;
  }

  .span-bar {
    padding: 0 50px;
  }

  .remove-btn {
    padding: 7px 6px !important;
  }

  .long-input {
    width: 80%;
  }

  .long-input-2 {
    min-width: 55%;
    margin-right: 10px;
  }

  .long-input-3 {
    width: 55%;
  }

  .short-input {
    width: 20%;
  }

  .short-input-2 {
    width: 25%;
  }

  .default-input {
    width: 50%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .picture {
    width: 148px;
    height: 148px;
    display: block;
  }

  .pic-bar {
    position: relative;
    display: inline-block;

    .close-icon {
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0, 0, 0, 0.5);
      cursor: pointer;
    }
  }

  .pic-add {
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }

  .el-dialog-div {
    height: 70vh;
    overflow: auto;
  }
</style>
